export const easyFlowMixin = {
    data() {
        return {
            jsplumbSetting: {
                // 动态锚点、位置自适应
                Anchors: [],
                Container: 'efContainer',
                // 连线的样式 StateMachine、Flowchart，Bezier、Straight
                // Connector: ['Flowchart', {curviness: 50}],

                // 链接线样式： Bezier: 贝塞尔曲线   Flowchart: 具有90度转折点的流程线     StateMachine: 状态机     Straight: 直线

                Connector: ['Flowchart'],
                anchor: ['Left', 'Right'],
                // 鼠标不能拖动删除线
                ConnectionsDetachable: false,
                // 删除线的时候节点不删除
                DeleteEndpointsOnDetach: false,
                // 连线的端点：圆形
                Endpoint: ['Dot', { radius: 3 }],
                // 连线的端点：矩形
                // Endpoint: ['Rectangle', {height: 10, width: 10}],
                // 线端点的样式
                EndpointStyle: { fill: '', outlineWidth: 1 },
                // 是否打开jsPlumb的内部日志记录
                LogEnabled: true,
                // 绘制连线
                PaintStyle: {
                    // stroke: '#E0E3E7',
                    stroke: '#409EFF',
                    strokeWidth: 2,
                    // 设置外边线的颜色、无色，为了方便点击 https://blog.csdn.net/roymno2/article/details/72717101
                    outlineStroke: 'transparent',
                    // 设定线外边的宽，单位px
                    outlineWidth: 10
                },
                // 绘制连线箭头
                Overlays: [
                    ['Arrow', { width: 10, length: 8, location: 1, foldback: 0.8 }],
                    ['Label', { location: 0.1, id: 'label', cssClass: 'aLabel' }]
                ],
                // 绘制图的模式 svg、canvas
                RenderMode: 'svg',
                // 没看到效果
                DragOptions: {
                    cursor: 'pointer',
                    zIndex: 2000,
                    hoverClass: 'dropHover',
                    activeClass: 'dragActive'
                }
                // 鼠标滑过线的样式
                // HoverPaintStyle: {stroke: '', strokeWidth: 0, cursor: 'pointer'}
                // 滑过锚点效果
                // EndpointHoverStyle: {fill: 'red'}
            },
            // jsplumb连接参数   刘： isSource  和 isTarget设置成true可以创建自动连接
            jsplumbConnectOptions: {
                isSource: true,
                isTarget: true,
                // 动态锚点、提供了4个方向 Continuous、AutoDefault
                anchor: ['Top', 'Bottom'],
                // 设置连线上面的label样式
                labelStyle: {
                    cssClass: 'flowLabel'
                },
                // 修改了jsplumb 源码，支持label 为空传入自定义style
                emptyLabelStyle: {
                    cssClass: 'emptyFlowLabel'
                }
            },
            jsplumbSourceOptions: {
                /* "span"表示标签，".className"表示类，"#id"表示元素id */
                filter: '.flow-node-drag',
                filterExclude: false,
                anchor: ['Top', 'Bottom'],
                allowLoopback: false,
                maxConnections: -1,
                onMaxConnections: function (info, e) {
                    console.log(`超过了最大值连线: ${info.maxConnections}`)
                }
            },
            // 参考 https://www.cnblogs.com/mq0036/p/7942139.html
            jsplumbSourceOptions2: {
                // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
                filter: '.flow-node-drag',
                filterExclude: false,
                // anchor: 'Continuous',
                allowLoopback: false,
                connector: ['Flowchart', { curviness: 50 }],
                connectorStyle: {
                    // 线的颜色
                    stroke: 'red',
                    // 线的粗细，值越大线越粗
                    strokeWidth: 1,
                    // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
                    outlineStroke: 'transparent',
                    // 线外边的宽，值越大，线的点击范围越大
                    outlineWidth: 10
                },
                connectorHoverStyle: { stroke: 'red', strokeWidth: 2 }
            },
            jsplumbTargetOptions: {
                // "span"表示标签，".className"表示类，"#id"表示元素id
                filter: '.flow-node-drag',
                filterExclude: false,
                anchor: ['Top', 'Bottom'],
                allowLoopback: false,
                dropOptions: { hoverClass: 'ef-drop-hover' }
            }
        }
    }
}
